<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-07-18 20:59:04
-->
<template>
  <el-card> <CategoryView /> </el-card>
  <el-card class="cardTop" v-show="isShow">
    <el-button type="primary" :icon="Plus" @click="addSpu">添加SPU</el-button>

    <el-table :data="attrList" style="width: 100%" border stripe>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="attrName" label="属性名称" />
      <el-table-column label="属性值名称列表">
        <template #default="{ row }">
          <el-tag v-for="item in row.attrValueList" :key="item.id" class="ml-2" type="success">{{
            item.valueName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button :icon="Edit" type="warning" @click="updateSpu(row)" />
          <el-button :icon="Delete" type="danger" />
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-card class="cardTop" v-show="!isShow">
    <el-form :model="addEditSpuParams" :inline="true" label-width="55px">
      <el-form-item label="属性名">
        <el-input v-model="addEditSpuParams.attrName" placeholder="请输入属性名" />
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="addSpuItem">添加属性值</el-button>
        <el-button type="primary">取消</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="addEditSpuParams.attrValueList" border stripe>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="属性值名称">
        <template #default="{ row, $index }">
          <el-input
            v-if="row.isEdit"
            ref="inputRef"
            v-model="row.valueName"
            @blur="toSpan(row, $index)"
            @keydown.enter="toSpan(row, $index)"
          />
          <span v-else style="display: block" @click="toInput(row)">{{ row.valueName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default>
          <el-popconfirm>
            <template #reference>
              <el-button type="danger" :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="cardTop">
      <el-button type="primary">保存</el-button>
      <el-button type="primary" @click="isShow = true">取消</el-button>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { reqAttrInfoList, type IAttrInfoList, type AttrValueList } from '@/api/attr'
import { useAttrStore } from '@/stores/attr'
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { ElMessage, type InputInstance } from 'element-plus'
import { storeToRefs } from 'pinia'
import { nextTick, ref, watch } from 'vue'
const isShow = ref(true)

const attrStore = useAttrStore()
const { category1Id, category2Id, category3Id } = storeToRefs(attrStore)

const attrList = ref<IAttrInfoList[]>([])
const inputRef = ref<InputInstance>()
const addEditSpuParams = ref<IAttrInfoList>({
  attrName: '',
  attrValueList: [],
  categoryId: '',
  categoryLevel: 3
})

const addSpuItem = () => {
  if (addEditSpuParams.value.attrName) {
    addEditSpuParams.value.attrValueList.push({
      valueName: '',
      isEdit: true
    })
    nextTick(() => {
      inputRef.value?.focus()
    })
  }
}

const toSpan = (row: AttrValueList, index: number) => {
  if (row.valueName?.trim() === '') {
    ElMessage.error('不能为空')
    addEditSpuParams.value.attrValueList.splice(index, 1)
  }

  row.isEdit = false
}
const toInput = (row: AttrValueList) => {
  row.isEdit = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}

const addSpu = () => {
  isShow.value = false
  addEditSpuParams.value.categoryId = category3Id.value
}
const updateSpu = (row: IAttrInfoList) => {
  isShow.value = false
  addEditSpuParams.value = row
}
const getAttrList = async () => {
  const res = await reqAttrInfoList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
  )
  if (res.code === 200) {
    attrList.value = res.data
  }
}
watch(category3Id, (newVal) => {
  if (newVal) {
    getAttrList()
  } else {
    attrList.value = []
  }
})
</script>

<script lang="ts">
export default {
  name: 'AttrView'
}
</script>

<style lang="scss" scoped>
.cardTop,
.el-table {
  margin-top: 18px;
}
</style>
